<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<canvas id = "canvas" width="600" height="500" style="border:3px solid #000"></canvas>

</body>
</html>

<script type="text/javascript">
	var canvas = document.getElementById('canvas');
	var context = canvas.getContext('2d');
	var b = new Image();
	b.src='images/butterfly.png';
	b.onload=drawB;

	function drawB() {
		context.drawImage(b,0,0,200,138,0,0,200,138);//前面四个数字代表截图区域，后面代表位置和大小//
		context.drawImage(b,0,0,200,138,200,0,200,138);
		context.drawImage(b,0,0,200,138,400,0,200,138);
		setTimeout(function(){
		context.clearRect(0,0,600,500)
		context.drawImage(b,0,0,200,138,200,200,200,138);
		context.drawImage(b,0,0,200,138,200,200,200,138);
		context.drawImage(b,0,0,200,138,200,200,200,138);

		},1000)


		// body...
	}
</script>